<template>
  <div style="display: none">
    <table>
      <tr>
        <th>朝代</th>
        <th>起讫年代</th>
        <th v-show="isShow">朝代</th>
        <th v-show="isShow">起讫年代</th>
        <th v-show="isShowTh">朝代</th>
        <th v-show="isShowTh">起讫年代</th>
      </tr>
      <tr :key="i" v-for="(dy, i) in restructuring(dynastyData.children)">
        <td :rowspan="dy[0].rows">{{ dy[0].dynasty }}</td>
        <td :rowspan="dy[0].rows">{{ dy[0].start }}~{{ dy[0].end }}</td>
        <td v-if="dy.length > 1" :rowspan="dy[1].rows">{{ dy[1].dynasty }}</td>
        <td v-if="dy.length > 1" :rowspan="dy[1].rows">{{ dy[1].start }}~{{ dy[1].end }}</td>
        <td v-if="dy.length > 2" :rowspan="dy[2].rows">{{ dy[2].dynasty }}</td>
        <td v-if="dy.length > 2" :rowspan="dy[2].rows">{{ dy[2].start }}~{{ dy[2].end }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "DynastyTable",
  props: ["dynasty"],
  data() {
    return {
      isShow: false,
      isShowTh: false,
      dynastyData: {
        dynasty: "周",
        start: -1029,
        end: -221,
        style: {
          backgroundColor: "brown",
          width: "20px",
          height: "20px"
        },
        children: [
          {
            dynasty: "周",
            start: "约公元前1046年",
            end: "约公元前256年",
            children: [{
              dynasty: "西周",
              start: "约公元前1029",
              end: "公元前771",
              children: []
            },
            {
              dynasty: "东周",
              start: "公元前770",
              end: "公元前256",
              children: [
                {
                  dynasty: "春秋",
                  start: "公元前770",
                  end: "公元前476",
                  children: []
                },
                {
                  dynasty: "战国",
                  start: "公元前475",
                  end: "公元前221",
                  children: []
                }
              ]
            }]
          }
        ]
      }
    }
  },
  methods: {
    //计算纵跨行数
    calculateRows(dy) {
      let num = 0;
      if (dy.children.length > 0) {
        this.isShow = true;
        for (let i in dy.children) {
          if (dy.children[i].children.length > 0) {
            this.isShowTh = true;
            num = num + dy.children[i].children.length;
          } else {
            num = num + 1;
          }
        }
      }
      if (num == 0) {
        num = 1;
      }
      return num;
    },

    //重构数据结构
    restructuring(dyList) {
      let list = [];
      let index = 0;
      for (let i in dyList) {
        list.push([{
          dynasty: dyList[i].dynasty,
          start: dyList[i].start,
          end: dyList[i].end,
          rows: this.calculateRows(dyList[i])
        }]);
        index++;
        for (let j in dyList[i].children) {
          if (j == 0 && this.calculateRows(dyList[i]) > 1) {
            list[index - 1].push({
              dynasty: dyList[i].children[j].dynasty,
              start: dyList[i].children[j].start,
              end: dyList[i].children[j].end,
              rows: this.calculateRows(dyList[i].children[j])
            });
            if (this.isShowTh && dyList[i].children[j].children.length == 0) {
              list[index - 1].push({
                dynasty: '-',
                start: '-',
                end: '-',
                rows: 1
              });
            }
            for (let k in dyList[i].children[j].children) {
              if (k == 0 && this.calculateRows(dyList[i].children[j]) > 1) {
                list[index - 1].push({
                  dynasty: dyList[i].children[j].children[k].dynasty,
                  start: dyList[i].children[j].children[k].start,
                  end: dyList[i].children[j].children[k].end,
                  rows: this.calculateRows(dyList[i].children[j].children[k])
                });
              } else {
                list.push([{
                  dynasty: dyList[i].children[j].children[k].dynasty,
                  start: dyList[i].children[j].children[k].start,
                  end: dyList[i].children[j].children[k].end,
                  rows: this.calculateRows(dyList[i].children[j].children[k])
                }]);
                index++;
              }
            }
          } else {
            list.push([{
              dynasty: dyList[i].children[j].dynasty,
              start: dyList[i].children[j].start,
              end: dyList[i].children[j].end,
              rows: this.calculateRows(dyList[i].children[j])
            }]);
            index++;
            for (let k in dyList[i].children[j].children) {
              if (k == 0 && this.calculateRows(dyList[i].children[j]) > 1) {
                list[index - 1].push({
                  dynasty: dyList[i].children[j].children[k].dynasty,
                  start: dyList[i].children[j].children[k].start,
                  end: dyList[i].children[j].children[k].end,
                  rows: this.calculateRows(dyList[i].children[j].children[k])
                });
              } else {
                list.push([{
                  dynasty: dyList[i].children[j].children[k].dynasty,
                  start: dyList[i].children[j].children[k].start,
                  end: dyList[i].children[j].children[k].end,
                  rows: this.calculateRows(dyList[i].children[j].children[k])
                }]);
                index++;
              }
            }
          }
        }
      }
      return list;
    }
  },
  created() {
    if (this.$props.dynasty) {
      this.dynastyData = this.$props.dynasty;
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
table {
  font-size: 10px;
  border: 1px solid black;
}

th {
  color: white;
  white-space: nowrap;
  text-align: center;
  border: 1px solid black;
}

td {
  color: white;
  white-space: nowrap;
  text-align: center;
  border: 1px solid black;
}
</style>